<template>
    <div class="series_body">
        <div class="nav">
            <Screen style="margin-right: 12px" :text="item.title" :action="classTxt == item.title"
                :cardShow="item.data.length" @click="handleAction(item.title)" v-for="item in navInfo" :key="item.id"
                :data="item.data" :classTxt="classTxt" />
        </div>
        <div class="main">
            <ShopsCard :data="shopsInfo" v-if="shopsInfo.length" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getseries } from '@/apis/apis.ts'
const classTxt = ref('全部')

const handleAction = (txt) => {
    classTxt.value = txt;

}
const navInfo = ref([])
const shopsInfo = ref([])

onMounted(async () => {
    let res = await getseries()
    navInfo.value = res.nav
    shopsInfo.value = res.all
    console.log(res);
})

</script>

<style scoped lang="scss">
.series_body {
    width: 1300px;
    margin: 0 auto;

    & .nav {
        display: flex;

    }
    & .main{
        margin-top: 20px;
        margin-bottom: 60px;
    }
}
</style>